import React,{Component} from "react";
import style from "./index.module.scss";
import header from "../../base/Header/index";

class ScanCode extends Component {
    constructor(props){
        super(props);
        this.state={
            userInfo:null,
            cameraOpen:false,
            showCan:false,
            showScanLoad:false,
        }
        this.mediaStreamTrack = null;
        this.codeImgSrc="";
    }

    closeC(mediaStreamTrack){
        if (mediaStreamTrack) {
            mediaStreamTrack.getTracks()[0].stop();
         }
    }

    scanCodeCall(_this){
        let video = this.videoEl;
        // let mediaStreamTrack = _this.mediaStreamTrack;
        //访问用户媒体设备的兼容方法
        function getUserMedia(constraints, success, error) {
            if (navigator.mediaDevices.getUserMedia) {
                //最新的标准API
                navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
            } else if (navigator.webkitGetUserMedia) {
                //webkit核心浏览器
                navigator.webkitGetUserMedia(constraints, success, error)
            } else if (navigator.mozGetUserMedia) {
                //firfox浏览器
                navigator.mozGetUserMedia(constraints, success, error);
            } else if (navigator.getUserMedia) {
                //旧版API
                navigator.getUserMedia(constraints, success, error);
            }

            setTimeout(()=>{
                _this.setState({showScanLoad:true})
            },1000)
        }

        function success(stream) {
            //兼容webkit核心浏览器
           let CompatibleURL = window.URL || window.webkitURL;
            //将视频流设置为video元素的源
            //video.src = CompatibleURL.createObjectURL(stream);

            // 播放
            video.srcObject = stream;
            video.play();
            _this.mediaStreamTrack = stream;
        }

        function error(error) {
            alert('调用摄像头失败')
        }

        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
            getUserMedia({ video: { width: 375, height: 667 } }, success, error);
        } else {
            alert('不支持访问用户媒体');
        };

        _this.setState({cameraOpen:true});
    }

    takePhoto () {
        let context = this.canEl.getContext('2d');
        context.drawImage(this.videoEl, 10, 5, 280, 140);
        var codeImgSrc = this.canEl.toDataURL("image/jpeg", 1);
        this.codeImgSrc=codeImgSrc;
        this.setState({showCan:true,showScanLoad:false});
        console.log("codeImgSrc_base64",this.codeImgSrc);
        　
        // 调用接口将数据传递给后端　base64
    }　　　　　　　　　　　　　

    closeCamera(){
        if (this.mediaStreamTrack) {
            this.mediaStreamTrack.getTracks()[0].stop();
            this.setState({cameraOpen:false,showCan:false,showScanLoad:false});
         }
    }

    componentDidMount(){
       this.scanCodeCall(this);
    }
    
    componentWillUnmount(){
        this.closeCamera();
        this.codeImgSrc="";
    }

    render(){
        return (
            <div className={style["index-root"]}>
                <div className={style["maim-box"]}>
                    <video ref={videoEl=>this.videoEl=videoEl}></video>
                    <canvas ref={canEl=>this.canEl=canEl} style={this.state.showCan?null:{display:"none"}}></canvas>
                    {this.state.showScanLoad &&
                        <div className={style["framing-box"]}>
                            <span>╭</span><span>╮</span>
                            <span>╰</span><span>╯</span>
                            <div className={style["scan-loading"]}></div>
                            <p>将条码放入框内点击<span>扫描</span>即可</p>
                        </div>
                    }

                    {this.state.cameraOpen
                        ? <div className={style["op-box"]}>
                            <button onClick={this.takePhoto.bind(this)}>扫码</button>
                            <button>相册</button>
                        </div>
                        : <div className={style["op-box"]}>
                            <button style={{backgroundColor:"#eee",color:"#666"}} onClick={this.scanCodeCall.bind(this,this)}>打开</button>
                        </div>
                    }
                </div> 
                <div className={style["header-box"]}>{header({title:"扫码", history:this.props.history})}</div>
            </div>
        )
    }
}

export default ScanCode;